<template>
  <div>
    <div class="content">
      <el-form label-width="80px" class="demo-ruleForm">
        <div class="chooseMiniapp">
          <div class="transfer rowFlex columnCenter">
            <div class="transferItem">
              <div class="subTitle rowFlex columnCenter">
                <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
                  <span>选取商户号</span>
                </el-checkbox>
              </div>
              <div class="transferContent">
                <el-input
                  v-model="miniapp"
                  size="mini"
                  clearable
                  placeholder="请输入商户号名称/商户号ID"
                  suffix-icon="el-icon-search"
                  style="margin-top:20px;"
                  @change="search"
                >
                </el-input>
                <el-checkbox-group v-model="checkAppList" class="columnFlex" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="(item,index) in allCheckList" :key="index" style="margin-top:20px;" :label="item">{{ item.body }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="goRight rowFlex allCenter" @click="goRightContent"><i class="el-icon-arrow-right"></i></div>
            <div class="transferItem">
              <div class="subTitle rowFlex columnCenter">
                <span>同步列表</span>
              </div>
              <div class="transferContent">
                <div v-for="(item,index) in rightList" :key="index" class="rowFlex columnCenter spaceBetween">
                  <p class="deleteItem">{{ item.body }}</p>
                  <i class="el-icon-delete icon" @click="removeItem(item,index)"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="dialog-footer rowFlex">
      <div class="btns">
        <el-button class="downVideo" size="medium" type="primary" :loading="loading" @click="submitData">确定</el-button>
        <el-button class="downVideo" size="medium" @click="close">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { merchantList, setMerchant } from '@/api/merchant'
export default {
  props: ['rowInfo'],
  data() {
    return {
      miniapp: '',
      chapterList: [],
      checkAll: false,
      checkAppList: [],
      allCheckList: [],
      rightList: [],
      payList: [],
      loading: false,
      isIndeterminate: false
    }
  },
  computed: {
  },
  mounted() {
    if (this.rowInfo.merchant.length > 0) {
      this.rightList = this.rowInfo.merchant
    }
    this.search(true)
  },
  methods: {
    handleCheckAllChange(val) {
      val ? this.checkAppList = [...this.allCheckList] : this.checkAppList = []
      this.isIndeterminate = false
    },
    search(type) {
      const data = {
        body: this.miniapp,
        merchant_id: '',
        page: 1,
        page_size: 100,
        total: 0
      }
      merchantList(data).then(res => {
        console.log(this.rightList, 'rightList')
        const list = res.data.data.filter((v) =>
          this.rightList.every((val) => val.merchant_id !== v.merchant_id)
        )
        console.log(list, 'list')
        type ? this.payList = res.data.data : ''
        this.allCheckList = JSON.parse(JSON.stringify(list))
      })
    },
    submitData() {
      if (this.rightList.length === 0) {
        this.$message.warning('请选取商户号')
        return false
      }
      this.loading = true
      const list = this.rightList.map(item => item.merchant_id)
      const data = {
        id: this.rowInfo.id,
        merchant_id: list
      }
      setMerchant(data).then(res => {
        this.loading = false
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          this.$emit('ok')
          this.close()
        }
      }, err => {
        this.loading = false
      })
    },
    goRightContent() {
      this.rightList = this.rightList.concat(this.checkAppList)
      const list = this.allCheckList.filter((v) =>
        this.checkAppList.every((val) => val.merchant_id !== v.merchant_id)
      )
      this.allCheckList = list
      this.checkAppList = []
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = this.checkAppList.length === this.payList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.payList.length
    },
    removeItem(item, index) {
      this.rightList.splice(index, 1)
      this.allCheckList.push(item)
    },
    close() {
      this.$emit('cancel')
    },
    submit() {
      this.$emit('ok')
    }
  }
}
</script>
  <style lang="scss" scoped>
  .content{
  width: 686px;
  padding: 20px;
  .chooseMiniapp{

  }

  .goRight{
      width: 28px;
      height: 28px;
      background: #06C261;
      border-radius: 4px;
      color: #ffffff;
      font-size: 16px;
      margin: 0 20px;
      cursor: pointer;
  }
  .title{
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-bottom: 10px;
    }
  .miniapp{

  }
  .transfer{
      .transferItem{
          width: 290px;
          height: 482px;
          border-radius: 4px;
          border: 1px solid #D9D9D9;
          .subTitle{
              width: 288px;
              height: 40px;
              background: #F5F7FA;
              border-radius: 4px 4px 0px 0px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 500;
              color: rgba(0,0,0,0.88);
              padding: 0 20px;
              line-height: 40px;
              span{
                  font-weight: 500;
                  font-size: 14px;
              }
          }
          .transferContent{
              width: 100%;
              height: calc(100% - 50px);
              overflow: auto;
              padding: 0 20px;
              .deleteItem{
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: rgba(0,0,0,0.88);
                  margin: 10px 0;
              }
              .icon{
                  cursor: pointer;
                  color: #D9D9D9;
              }
          }
      }
      .transferLeft{

      }
      .transferRight{

      }
  }
  }
  .downVideo{

  }
  </style>